<template>
    <!-- Background Decoration -->
    <div class="background-decoration">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
    </div>

    <el-container class="admin-container">
        <!-- Sidebar (Custom Styled) -->
        <el-aside width="280px" class="app-sidebar">
            <!-- Header / Logo -->
            <div class="sidebar-header animate-enter stagger-1">
                <div class="logo-card">
                    <div class="logo-content">
                        <div class="logo-text">
                            <span class="app-name">云南省失业数据</span>
                            <span class="app-edition">Province Edition</span>
                        </div>
                    </div>
                    <div class="status-badge">
                        <span class="badge-tag">省端</span>
                        <span class="status-dot"></span>
                        <span class="status-text">在线</span>
                    </div>
                </div>
            </div>

            <!-- Navigation -->
            <nav class="sidebar-nav animate-enter stagger-2">
                <div v-for="item in menuItems" :key="item.path" class="nav-item-wrapper">
                    <button
                        class="nav-item"
                        :class="{ 'is-active': activeMenu === item.path }"
                        @click="handleMenuSelect(item.path)"
                        @mouseenter="hoveredPath = item.path"
                        @mouseleave="hoveredPath = null"
                    >
                        <!-- 1. Active Background (Gradient) -->
                        <div
                            class="nav-bg-active"
                            :class="{ 'opacity-100': activeMenu === item.path }"
                        ></div>

                        <!-- 2. Hover Background -->
                        <div
                            class="nav-bg-hover"
                            :class="{
                                'opacity-100':
                                    activeMenu !== item.path && hoveredPath === item.path,
                            }"
                        ></div>

                        <!-- 3. Content -->
                        <div
                            class="nav-content"
                            :class="{ 'translate-x': activeMenu === item.path }"
                        >
                            <el-icon
                                class="nav-icon"
                                :class="{ 'text-white': activeMenu === item.path }"
                                :size="20"
                            >
                                <component :is="item.icon" />
                            </el-icon>
                            <span
                                class="nav-label"
                                :class="{ 'text-white': activeMenu === item.path }"
                            >
                                {{ item.title }}
                            </span>
                        </div>

                        <!-- 4. Active Indicator Dot -->
                        <div class="active-dot" :class="{ show: activeMenu === item.path }"></div>

                        <!-- 5. Active Glow Shadow -->
                        <div class="active-glow" :class="{ show: activeMenu === item.path }"></div>
                    </button>
                </div>
            </nav>

            <!-- Footer / User Profile -->
            <div class="sidebar-footer animate-enter stagger-3">
                <div class="user-card">
                    <div class="user-card-header">
                        <span class="section-title">账户信息</span>
                        <button class="logout-btn" @click="handleLogout" title="退出登录">
                            <el-icon>
                                <SwitchButton />
                            </el-icon>
                        </button>
                    </div>

                    <div class="user-info">
                        <div class="username">管理员</div>
                        <div class="enterprise-info">
                            <el-icon class="ent-icon">
                                <User />
                            </el-icon>
                            <span class="ent-name">系统管理员</span>
                        </div>
                    </div>

                    <!-- Decorative Glow -->
                    <div class="user-card-glow"></div>
                </div>
            </div>
        </el-aside>

        <!-- 主容器 -->
        <el-container class="main-container">
            <!-- 顶部栏 -->
            <el-header class="header">
                <div class="header-left">
                    <span class="page-title">{{ getPageTitle(activeMenu) }}</span>
                </div>
                <div class="header-right">
                    <!-- 通知图标 -->
                    <el-dropdown trigger="click" ref="dropdownRef">
                        <span class="header-icon">
                            <el-icon><Bell /></el-icon>
                            <el-badge
                                v-if="notificationUnreadCount > 0"
                                :value="notificationUnreadCount"
                                class="notification-badge"
                            />
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <div class="dropdown-header">
                                    <span>最近通知</span>
                                    <el-link
                                        type="primary"
                                        size="small"
                                        command="viewAll"
                                        @click="handleNotificationCommand('viewAll')"
                                        >查看全部</el-link
                                    >
                                </div>
                                <div class="dropdown-content scrollable">
                                    <el-dropdown-item
                                        v-for="notification in notifications"
                                        :key="notification.noticeId"
                                        :command="notification.noticeId"
                                        class="notification-item"
                                        @click="handleNotificationCommand(notification.noticeId)"
                                    >
                                        <el-badge v-if="!notification.isRead" is-dot />
                                        <div class="notification-content">
                                            <div class="notification-title">
                                                {{ notification.title }}
                                            </div>
                                            <div class="notification-date">
                                                {{ notification.startTime }}
                                            </div>
                                        </div>
                                    </el-dropdown-item>
                                    <div v-if="notifications.length === 0" class="empty-tip">
                                        暂无通知
                                    </div>
                                </div>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                    <!-- 待办事项图标 -->
                    <el-dropdown trigger="click" @command="handleTodoCommand">
                        <span class="header-icon">
                            <el-icon><DocumentCopy /></el-icon>
                            <el-badge
                                v-if="todoTotalCount > 0"
                                :value="todoTotalCount"
                                class="todo-badge"
                            />
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <div class="dropdown-header">
                                    <span>待办事项</span>
                                </div>
                                <div class="dropdown-content scrollable">
                                    <el-dropdown-item
                                        v-for="todo in todos"
                                        :key="todo.id"
                                        :command="todo.id"
                                        class="todo-item"
                                        @click="handleTodoCommand(todo.path)"
                                    >
                                        <div class="todo-icon" :class="`icon-${todo.type}`">
                                            {{ todo.icon }}
                                        </div>
                                        <div class="todo-info">
                                            <div class="todo-title">{{ todo.title }}</div>
                                            <div class="todo-status">需要处理</div>
                                        </div>
                                        <div
                                            class="todo-count"
                                            :class="todo.type === 'warning' ? 'count-warning' : ''"
                                        >
                                            {{ todo.count }}
                                        </div>
                                    </el-dropdown-item>
                                    <div v-if="todos.length === 0" class="empty-tip">
                                        暂无待办事项
                                    </div>
                                </div>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>

            <!-- 主内容区域 -->
            <el-main class="content">
                <router-view />
            </el-main>
        </el-container>
    </el-container>

    <!-- 通知详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="通知详情" width="60%" destroy-on-close>
        <div v-if="currentNotice" class="notice-detail">
            <div class="detail-header">
                <h3 :class="{ 'important-title': currentNotice.isImportant === 1 }">
                    {{ currentNotice.title }}
                </h3>
                <div class="detail-meta">
                    <span>发布人：{{ currentNotice.publisher }}</span>
                    <span>发布时间：{{ formatDate(currentNotice.publishTime) }}</span>
                    <span>阅读次数：{{ currentNotice.readCount }}</span>
                    <el-tag :type="currentNotice.isImportant === 1 ? 'danger' : 'info'">
                        {{ currentNotice.isImportant === 1 ? '重要通知' : '普通通知' }}
                    </el-tag>
                </div>
            </div>
            <div class="detail-content">
                <div v-html="currentNotice.content"></div>
            </div>
            <div v-if="currentNotice.attachment" class="detail-attachment">
                <el-divider content-position="left">附件</el-divider>
                <el-link type="primary" :href="currentNotice.attachment" target="_blank">
                    <el-icon><Download /></el-icon>
                    {{ currentNotice.attachmentName }}
                </el-link>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
    ElContainer,
    ElAside,
    ElHeader,
    ElMain,
    ElButton,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElIcon,
    ElBadge,
    ElLink,
    ElDialog,
    ElDivider,
    ElMessageBox,
    ElMessage,
} from 'element-plus';
import {
    DataAnalysis as DataAnalysisIcon,
    Management,
    DocumentCopy,
    Histogram,
    Bell,
    User,
    Calendar,
    Download,
    SwitchButton,
} from '@element-plus/icons-vue';
import noticeApi from '@/api/notice.js';

const activeMenu = ref('overview');
const hoveredPath = ref(null);

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

// 菜单项配置 (Converted for new Sidebar)
const menuItems = [
    { path: 'overview', title: '概况', icon: DataAnalysisIcon },
    { path: 'enterprise', title: '企业管理', icon: Management },
    { path: 'dataManage', title: '数据管理', icon: DocumentCopy },
    { path: 'dataAnalysis', title: '数据分析', icon: Histogram },
    { path: 'dataExport', title: '数据汇总', icon: Download },
    { path: 'notification', title: '通知管理', icon: Bell },
    { path: 'account', title: '账号管理', icon: User },
    // { path: 'logs', title: '日志管理', icon: DocumentCopy },
    { path: 'survey', title: '调查期管理', icon: Calendar },
];

// Helper to get title for header
const getPageTitle = (path) => {
    const item = menuItems.find((i) => i.path === path);
    return item ? item.title : '管理系统';
};

// 通知相关
const notifications = ref([]);

const notificationUnreadCount = ref();

// 待办事项相关
const todos = ref([
    {
        id: 1,
        title: '待审核企业备案',
        count: 0,
        type: 'normal',
        icon: '👤',
        // TODO: 待审核企业备案路径
        path: '',
    },
    {
        id: 2,
        title: '待审核数据报表',
        count: 0,
        type: 'normal',
        icon: '📊',
        path: '/home/dataManage/pending',
    },
    {
        id: 3,
        title: '待上传数据报表',
        count: 0,
        type: 'normal',
        icon: '📤',
        path: '/home/dataManage/pending-upload',
    },
]);

// 计算待办事项总数
const todoTotalCount = computed(() => {
    return todos.value.reduce((total, todo) => total + todo.count, 0);
});

// 通知详情相关
const showDetailDialog = ref(false);
const currentNotice = ref(null);

// 格式化日期
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    return d.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
    });
};

const dropdownRef = ref(null);

// 处理通知命令
const handleNotificationCommand = async (command) => {
    if (command === 'viewAll') {
        // 查看全部通知
        router.push('/home/notification/all');
        activeMenu.value = 'notification';
        // 关闭dropdown
        if (dropdownRef.value) {
            dropdownRef.value.handleClose();
        }
    } else {
        // 查看通知详情
        await viewNoticeDetail(command);
    }
};

// 处理待办事项命令
const handleTodoCommand = (path) => {
    router.push(path);
    activeMenu.value = 'dataManage';
};

// 查看通知详情
const viewNoticeDetail = async (noticeId) => {
    try {
        const response = await noticeApi.getNoticeDetail(noticeId);
        if (response.code === 200) {
            currentNotice.value = response.data;
            showDetailDialog.value = true;
            // 标记为已读
            // 找到对应的通知并更新未读状态
            const notificationIndex = notifications.value.findIndex(
                (item) => item.noticeId === noticeId
            );
            if (notificationIndex !== -1 && !notifications.value[notificationIndex].isRead) {
                notifications.value[notificationIndex].isRead = true;
                // 更新未读数
                if (notificationUnreadCount.value > 0) {
                    notificationUnreadCount.value--;
                }
                // 调用API标记为已读
                try {
                    await noticeApi.markNoticeRead(noticeId);
                } catch (markError) {
                    console.error('标记通知已读失败:', markError);
                }
            }
        }
    } catch (error) {
        console.error('获取通知详情失败:', error);
    }
};

// 加载通知数据
const loadNotifications = async () => {
    try {
        // 获取最近的通知列表
        const response = await noticeApi.getCurrentNoticeList();
        if (response.code === 200) {
            notifications.value = response.data.noticeInfoList || [];
            notificationUnreadCount.value = response.data.noReadCount || 0;
            todos.value[0].count = response.data.auditEnterpriseCount || 0;
            todos.value[1].count = response.data.auditDataCount || 0;
            todos.value[2].count = response.data.uploadDataCount || 0;
        }
    } catch (error) {
        console.error('加载通知失败:', error);
    }
};

const handleMenuSelect = (path: string) => {
    activeMenu.value = path;
    router.push(`/home/${path}`);
};

const handleLogout = async () => {
    try {
        await ElMessageBox.confirm('您确定要退出当前账号吗？', '退出提醒', {
            confirmButtonText: '确认退出',
            cancelButtonText: '取消',
            type: 'warning',
            customClass: 'app-logout-confirm-box',
            center: true,
            showClose: false,
            closeOnClickModal: false,
            draggable: true,
        });

        if (proxy && proxy.$request) {
            try {
                await proxy.$request.post({ url: '/account/logout' });
            } catch (err) {
                console.log('退出登录请求失败，可能是接口未准备好');
            }
        }

        localStorage.clear();
        router.push('/login');
        ElMessage.success('已安全退出');
    } catch (e) {
        // cancelled
    }
};

// 组件挂载时加载数据
onMounted(() => {
    const path = route.name ? (route.name as string).split('-')[0] : 'overview';
    activeMenu.value = path;
    loadNotifications();
});
</script>

<style scoped lang="scss">
// Variables (Copied and Adapted from AppSidebar)
$primary-color: #5b5ef7;
$primary-gradient-start: #5b5ef7;
$primary-gradient-end: #7c7eff;
$bg-color: #f9f9fc;
$sidebar-bg: rgba(255, 255, 255, 0.7);
$text-main: #1e293b;
$text-muted: #94a3b8;
$transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

// Animations
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-enter {
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

// Background Decoration
.background-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #f5f7fa; // Fallback base color

    .blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.2;
        animation: pulse 8s infinite ease-in-out;
    }

    .blob-1 {
        top: -10%;
        left: -10%;
        width: 40%;
        height: 40%;
        background: #5b5ef7;
        animation-duration: 8s;
    }

    .blob-2 {
        bottom: -10%;
        right: -10%;
        width: 40%;
        height: 40%;
        background: #8b5cf6;
        animation-duration: 10s;
    }
}

.admin-container {
    height: 100vh;
    // Remove solid background to see blobs
    background: transparent;
}

// Sidebar Styling
.app-sidebar {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: $sidebar-bg;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 0 24px rgba(91, 94, 247, 0.04);
    z-index: 40;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden; // Prevent scrollbar from appearing on the aside itself if not needed
}

// Header
.sidebar-header {
    padding: 24px 24px 8px;
}

.logo-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: $transition-smooth;
    cursor: default;

    &:hover {
        box-shadow: 0 10px 25px -5px rgba(91, 94, 247, 0.15);
        transform: translateY(-2px);
        border-color: rgba(91, 94, 247, 0.2);
    }
}

.logo-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-text {
    display: flex;
    flex-direction: column;

    .app-name {
        font-size: 18px;
        font-weight: 700;
        color: $text-main;
        line-height: 1.2;
        transition: color 0.3s;
    }

    .app-edition {
        font-size: 11px;
        color: $text-muted;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 2px;
    }
}

.logo-card:hover .app-name {
    color: $primary-color;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 8px;

    .badge-tag {
        padding: 4px 10px;
        border-radius: 6px;
        background: #f0f1ff;
        color: $primary-color;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid rgba(91, 94, 247, 0.1);
    }

    .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
        animation: pulse 2s infinite;
    }

    .status-text {
        font-size: 12px;
        color: $text-muted;
    }
}

// Navigation
.sidebar-nav {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
}

.nav-item {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s;

    &:active {
        transform: scale(0.96);
    }
}

.nav-bg-active {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, $primary-gradient-start, $primary-gradient-end);
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.nav-bg-hover {
    position: absolute;
    inset: 0;
    background: rgba(238, 242, 255, 0.6); // indigo-50/60
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    transition: $transition-smooth;

    &.translate-x {
        transform: translateX(4px);
    }
}

.nav-icon {
    color: $text-muted;
    transition: color 0.3s;

    &.text-white {
        color: white;
    }
}

.nav-item:hover .nav-icon:not(.text-white) {
    color: $primary-color;
}

.nav-label {
    font-size: 14px;
    font-weight: 500;
    color: #64748b; // slate-500
    transition: color 0.3s;

    &.text-white {
        color: white;
    }
}

.nav-item:hover .nav-label:not(.text-white) {
    color: $text-main;
}

.active-dot {
    position: absolute;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 10;
    transform: scale(0);
    opacity: 0;
    transition: $transition-smooth;

    &.show {
        transform: scale(1);
        opacity: 1;
    }
}

.active-glow {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(91, 94, 247, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;

    &.show {
        opacity: 1;
    }
}

.opacity-100 {
    opacity: 1;
}

// Footer / User Profile
.sidebar-footer {
    padding: 16px;
    margin-top: auto;
}

.user-card {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: $transition-smooth;
    overflow: hidden;

    &:hover {
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 10px 30px -10px rgba(91, 94, 247, 0.2);
        transform: translateY(-4px);
    }
}

.user-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .section-title {
        font-size: 12px;
        font-weight: 600;
        color: $text-muted;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}

.logout-btn {
    padding: 6px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: $text-muted;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
        color: #ef4444; // red-500
        background: #fef2f2; // red-50
    }

    &:active {
        transform: scale(0.9) rotate(12deg);
    }
}

.user-info {
    .username {
        font-size: 14px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.3s;
    }

    .enterprise-info {
        display: flex;
        align-items: flex-start;
        gap: 6px;

        .ent-icon {
            font-size: 12px;
            color: $text-muted;
            margin-top: 3px;
        }

        .ent-name {
            font-size: 12px;
            color: #64748b;
            line-height: 1.4;
            word-break: break-all;
            transition: color 0.5s;
        }
    }
}

.user-card:hover .username {
    color: $primary-color;
}

.user-card-glow {
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 64px;
    height: 64px;
    background: rgba(91, 94, 247, 0.1);
    border-radius: 50%;
    filter: blur(24px);
    transition: transform 1s;

    .user-card:hover & {
        transform: scale(1.5);
    }
}

// Main Content Area
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;

    .header {
        background-color: rgba(255, 255, 255, 0.8); // Slight transparency
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        margin: 16px 16px 0; // Floating header effect
        border-radius: 16px;

        .header-left {
            display: flex;
            align-items: center;
            .page-title {
                font-size: 18px;
                font-weight: 600;
                color: #1e293b;
            }
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 16px;

            .header-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                cursor: pointer;
                color: #64748b;
                font-size: 18px;
                position: relative;
                transition: all 0.2s;

                &:hover {
                    color: $primary-color;
                    background-color: #eff6ff;
                    border-radius: 8px;
                }
            }

            .notification-badge {
                position: absolute;
                top: 6px;
                right: 6px;
            }

            .todo-badge {
                position: absolute;
                top: 6px;
                right: 6px;
            }
        }
    }

    .content {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        // Make content cards transparent/glassy if desired, but relying on router-view components mostly
    }
}

:deep(.el-dropdown-menu__item) {
    padding: 10px;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid #e9ecef;
    height: auto;
    line-height: normal;
}

.dropdown-header {
    width: 220px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    color: #333;
}

.dropdown-content {
    padding: 0;
    max-height: 400px;
    overflow: hidden;

    &.scrollable {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* Notification Items */
.notification-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    transition: background-color 0.2s;

    &:hover {
        background-color: #f5f7fa;
    }

    &:last-child {
        border-bottom: none;
    }
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.4;
}

.notification-date {
    font-size: 12px;
    color: #6b7280;
}

/* Todo Items */
.todo-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: background-color 0.2s;

    &:hover {
        background-color: #f5f7fa;
    }

    &:last-child {
        border-bottom: none;
    }
}

.todo-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #f9fafb;
    border-radius: 6px;
}

.todo-info {
    flex: 1;
}

.todo-title {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
}

.todo-status {
    font-size: 12px;
    color: #6b7280;
}

.todo-count {
    font-size: 18px;
    font-weight: 600;
    color: #3b82f6;
}

.count-warning {
    color: #ef4444;
}

/* Empty Tip */
.empty-tip {
    text-align: center;
    padding: 24px;
    color: #6b7280;
    font-size: 14px;
}

/* Notification Detail */
.notice-detail {
    .detail-header {
        margin-bottom: 20px;

        h3 {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 12px;
        }

        .important-title {
            color: #ef4444;
        }

        .detail-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 14px;
            color: #6b7280;

            span {
                display: flex;
                align-items: center;
            }
        }
    }

    .detail-content {
        font-size: 16px;
        line-height: 1.8;
        color: #374151;
        margin-bottom: 20px;
        white-space: pre-wrap;
    }

    .detail-attachment {
        margin-top: 20px;
    }
}
</style>

<style lang="scss">
/* 统一退出弹窗样式，匹配 enterprise 端 */
.app-logout-confirm-box {
    --el-messagebox-title-color: #1e293b;
    --el-messagebox-content-color: #64748b;

    border-radius: 24px !important;
    padding: 8px !important;
    border: none !important;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    width: 360px !important;
    max-width: 90vw !important;
    background-color: #ffffff !important;

    .el-message-box__header {
        padding: 24px 24px 12px !important;

        .el-message-box__title {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.4;
        }

        .el-message-box__headerbtn {
            top: 24px;
            right: 24px;
        }
    }

    .el-message-box__status {
        transform: translateY(-2px);
        font-size: 24px !important;
    }

    .el-message-box__content {
        padding: 0 24px 28px !important;
        font-size: 15px !important;
        line-height: 1.6;
    }

    .el-message-box__btns {
        padding: 0 24px 24px !important;
        display: flex;
        gap: 12px;

        .el-button {
            border-radius: 12px;
            padding: 10px 20px;
            height: 42px;
            font-size: 14px;
            font-weight: 600;
            border: none;
            flex: 1;
            margin: 0 !important;
        }

        .el-button--default {
            background: #f8fafc;
            color: #475569;

            &:hover {
                background: #eef2ff;
                color: #4338ca;
            }
        }

        .el-button--primary {
            background: linear-gradient(120deg, #5b5ef7, #7c7eff);
            box-shadow:
                0 10px 20px -10px rgba(91, 94, 247, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);

            &:hover {
                filter: brightness(1.03);
            }
        }
    }
}
</style>
